/*
 * home page
**/
<template>
<div>
<v-tab></v-tab>
<!-- 个人信息 -->
<div class="item-box userinfo">
	<div class="usermsg-box" v-show="usermsgshow">
		<swiper :options="userMsgOption" class="page-swiper msg-swiper">
		  <swiper-slide class="swiper-no-swiping">
		    <span v-if="scoreInfo < 70" class="user-msg"><i class="laba"></i>做任务赚积分，100积分可兑换1元微信红包!</span>
		    <span v-if="scoreInfo > 70 && scoreInfo < 100 " class="user-msg"><i class="laba"></i>您还差{{100 - scoreInfo}}积分，就可以兑换红包了，快去赚积分吧！</span>
		    <a v-if="scoreInfo > 100" href="#/store" class="user-msg"><i class="laba"></i>您可以兑换红包了，快去兑换吧！</a>
		  </swiper-slide>
		  <swiper-slide class="swiper-no-swiping" v-for="item in latestlist">
		    <span class="user-msg ellipsis"><i class="laba"></i>{{item.username}} {{item.desc}}</span>
		  </swiper-slide>
		</swiper>
		<a class="msg-close" @click="function(){usermsgshow=false}">×</a>
	</div>
	<div class="weui-flex bd" v-if="I9RIA">
	    <div class="avator" @click="recode(3)">
	    	<router-link class="avator-box" to="/icenter">
	    		<img :src="I9RIA.headimgurl || '#'" alt="" />
	    	</router-link>
	    	<!--<i class="new" v-if="!showShareDct"></i>-->
	    </div>
	    <div class="infobox">
    		<div class="name ellipsis">{{I9RIA.nickname || ''}}</div>
			<router-link class="location-hd" to="/city">{{location.city || '全国'}}&nbsp;<i class="icon-location"></i></router-link>
			<!--<i class="icon-more"></i>-->
	    </div>
	    <div class="weui-flex__item account">
	    	<div class="con"><i></i><span>{{scoreInfo}}</span><router-link to="/records" class="s-info">积分记录</router-link></div>
	    	<div class="btn-box">
	    		<router-link class="btn orangeb" to="/store"><span @click="recode(2)">提现</span></router-link>
	    		<a class="btn redb" @click="siginEv" v-if="!sigin.sigined">签到</a>
	    		<a class="btn" style="background:#ccc;" v-if="sigin.sigined">已签到</a>
	    	</div>
	    </div>
	</div>
</div>
<!-- 轮播 -->
<swiper :options="swiperOption" class="page-swiper">
  <swiper-slide v-for="slide in swiperSlides">
    <span :style="{backgroundImage: 'url('+slide.thumb+')'}"></span>
  </swiper-slide>
  <!--<div class="swiper-pagination" slot="pagination"></div>-->
</swiper>
<!--<div class="page-msg" v-if="!subscribe" v-show="msgshow"><span>关注玩赚平台，做任务赚积分，随时获取更多福利</span><a class="m-about" v-tap="{methods:showSubscribe}">+关注</a><a class="msg-close" v-tap="{methods:function(){msgshow=false}}">×</a></div>-->
<div class="weui-cells mod-items" v-if="gameList">
  <!-- 类型选择 -->
  <div class="nav-tab">
    <div class="btn-group"><span @click="showFiller('score')" :class="{'active': gameType === 2}"><i class="i1"></i>赚积分</span><span @click="showFiller('redbag')" :class="{'active': gameType === 3}"><i class="i3"><i></i></i>抢红包</span><span @click="showFiller('welfare')" :class="{'active': gameType === 1, 'fixed' :step === 2}"><i class="i2"></i>赚福利</span></div>
  </div>
  <div class="nav-tab child" v-show="gameType === 1">
    <div class="btn-group"><span :class="{'active': sortType === 1}" @click="showFiller2('new')">最新</span><span @click="showFiller2('hot')" :class="{'active': sortType === 2}">最热</span></div>
  </div>
  <!--<div v-if="!subscribe" @click="showSubscribe"><img src="static/imgs/0.png" width="100%"></div>-->
  <!-- 数据列表 -->
  <div v-load-more="loaderMore" class="obj-list">
  	<!--<router-link class="weui-cell" v-show="gameType === 2" to="/promotion">
      <div class="weui-cell__hd def-icon">
        <span class="task"></span>
      </div>
      <div class="weui-cell__bd">
        <p class="cell__bd-tit">邀请好友赚积分</p>
        <p class="bd-desc">每天最多可获取<span>1000积分</span></p>
      </div>
      <div class="weui-cell__ft reset-ft">
      	<span :class="complete === 0 ? 'icon-m' : 'complete'"></span>
      </div>
    </router-link>-->
    
    <div v-for="(item, index) in gameList" class="weui-cell" @click="gameRecord(item)" :class="{'fixed' :step === 3 && index === 0}" v-show="gameType !== 3">
      <div class="weui-cell__hd def-icon">
        <span v-if="!item.is_promotion" :style="{backgroundImage: 'url('+item.icon+')'}"></span>
        <span v-if="item.is_promotion" class="surplus">{{item.cangetscorenum - item.receivedscore}}积分</span>
      </div>
      <div class="weui-cell__bd">
        <p class="cell__bd-tit ellipsis">{{item.title}}</p>
        <i v-show="gameType === 1 && index < 3" :class="[sortType === 1 ? 't-new' : 't-pri']"></i>
        <p v-if="!item.is_promotion" class="bd-desc">参与活动有机会获得 <span>"{{item.prize}}"</span></p>
        <!-- <p style="font-size: 13px;color: #888888;">{{item.pv}}人参与 <span v-if="item.is_played === 1" style="color: #ffa200;">&nbsp;&nbsp;已参与</span></p> -->
        <p v-if="item.is_played === 1 && item.is_promotion"  class="bd-desc">您已获得 <span>{{item.receivedscore}}积分</span>，继续邀请好友获得更多积分</p>
        <p v-if="item.is_played !== 1 && item.is_promotion && item.is_forge !== '1'"  class="bd-desc">分享好友首次参与可获<span>{{item.personscore}}积分</span></p>
        <p v-if="item.is_played !== 1 && item.is_promotion && item.is_forge === '1'"  class="bd-desc">每邀请一名好友阅读增加 <span>{{item.personscore}}积分</span>，最高可获得{{item.personscore * 21}}积分。</p>
      </div>
      <div class="weui-cell__ft reset-ft"><span v-if="item.is_played === 1 && item.is_promotion" class="share"></span>
        <span v-if="item.is_played === 1 && !item.is_promotion || item.is_played !== 1" class="icon-m"></span>
      </div>
    </div>
    <!-- 红包 -->
    <div v-for="item in redPackList" class="weui-cell" @click="gameRecord(item)" v-show="gameType === 3">
      <div class="weui-cell__hd def-icon">
        <span :style="{backgroundImage: 'url('+item.icon+')'}"></span>
      </div>
      <div class="weui-cell__bd">
        <p class="cell__bd-tit ellipsis">{{item.title}}</p>
        <p class="bd-desc">{{item.sub_title}}</p>
        <div class="seller"><i :class="'lg'+item.cid"></i><span>{{item.cname}}</span></div>
      </div>
      <div class="weui-cell__ft reset-ft"><span v-if="item.is_played === 1" class="share"></span>
        <span v-if="item.is_played !== 1" class="icon-m"></span>
      </div>
    </div>
  </div>
  <div class="weui-loadmore" v-if="showLoading">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
  </div>
  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
      <span class="weui-loadmore__tips">期待上新</span>
  </div>
</div>
<!-- loading -->
<div v-if="inGetData">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>
<!-- 新手引导 -->
<div class="guide-layer" v-if="step > 0 && step < 5" >
	<div class="guide-font font1" v-show="step === 1">
		<p>1、点击此处做积分任务</p>
		<p>积分可兑换<span>微信红包</span></p>
		<div class="arrow"></div>
	</div>
	<div class="demo" v-show="step === 1"></div>
	<div class="guide-font font2" v-show="step === 2">
		<p>2、点击这里，天天可以</p>
		<p>领取<span>免费福利</span></p>
		<div class="arrow"></div>
	</div>
	<div class="guide-font font3" v-show="step === 3">
		<p>3、点击参与H5小游戏，完成后</p>
		<p>抽奖或排行榜，获得商家提供的<span>免费奖品</span></p>
		<div class="arrow"></div>
	</div>
	<div class="guide-font font4" v-show="step === 4">
		<p>4、点击这里去赚<span>高额积分</span></p>
		<div class="guide-tab"></div>
		<div class="arrow"></div>
		<div class="nextguide" @click="nextguide" style="top:-0.8rem;" v-show="step === 4">下一步</div>
	</div>
	<div class="nextguide" @click="nextguide" v-show="step !== 4">下一步</div>
	<a class="clayer" @click="closelayer"></a>
</div>
<!-- 签到结果 -->
<div v-show="siginShow">
	<div class="weui-dialog reset-top">
		<div class="weui-dialog-hd"><i class="buling" :class="{'fail': !sigin.suc}"></i></div>
		<div class="weui-dialog-bd">
			<p class="sigin-ora" v-if="sigin.suc">已签到{{sigin.series}}天</p>
			<p class="sigin-ora" v-if="!sigin.suc">{{sigin.msg}}</p>
			<p class="sigin-desc">连续签到30天，可额外获得<span>{{sigin.quota}}积分</span></p>
			<transition name="fold"><span class="sigin-tip" v-show="scoreshow">+{{sigin.point}}积分</span></transition>
		</div> 
		<div class="weui-dialog-ft"></div>
		<a href="javascript:void(0)" class="dialogCloseBtn" @click="closeSigin"></a>
	</div>
	<div transition="fade" class="modal-maks" style=""></div>
</div>
<router-link v-if="showInfoState" class="tips-info" to="/info"></router-link>
<div class="mod-footer-place"></div>
<modal-dialog ref="dialog"></modal-dialog>
</div>
</template>
<script>
import {getGame, getGamePromotion, latestRecord, userPersonality, getBanner, bannerRecord, getUserCredit, gameRecord, clickRecord, subsribeCntToday, areaRecord, getRedPackList, signed} from 'src/service/getData'
import vTab from 'components/common/tab'
import modalDialog from 'src/components/dialog'
// import {swiper, swiperSlide} from 'vue-awesome-swiper'
// import VueAwesomeSwiper from 'vue-awesome-swiper'
import {loadMore} from 'src/config/mixin'
import {mapState} from 'vuex'
import {cookie} from 'src/config/utils'
import {localStorage} from '../../config/utils'
export default {
  data () {
    return {
      unionid: '',
      inGetData: false,
      gameType: 2,
      sortType: 1,
      showInfoState: false,
      swiperOption: {
        autoplay: 3500,
        setWrapperSize: true,
        // pagination: '.swiper-pagination',
        // paginationClickable: true,
        autoplayDisableOnInteraction: false,
        mousewheelControl: true,
        observeParents: true,
        loop: true,
        // 解决loop时复制出来的元素绑定事件不成功，使用箭头函数，避免解析时获取data属性为undefined
        onClick: (swiper) => {
          let item = this.swiperSlides[swiper.realIndex]
          this.tryBannerRecord(item.aid, item.url)
        }
      },
      userMsgOption: {
        autoplay: 4000,
        speed: 1000,
        loop: true,
        direction: 'vertical'
      },
      swiperSlides: [{}], // {src: 'static/imgs/3.png', url: '/promotion'},
      gameList: [],
      redPackList: [], // 抢红包
      // subscribe: true,
      offset: 1, // 批次加载数据 每次+1
      pageSize: 10, // 每页显示数据条数
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      showLoading: true, // 显示加载动画
      touchend: false, // 没有更多数据
      // msgshow: true, // 公众号广告
      usermsgshow: true, // 兑换实时广播
      latestlist: [], // 跑马灯列表
      scoreInfo: 0, // 积分余额
      complete: 0, // 完成情况
      showShareDct: false,
      step: 99, // 引导步骤
      siginShow: false, // 签到弹窗
      clickSignAble: true, // 能否重复点击签到
      sigin: {
        series: 1,
        point: 1,
        quota: 50,
        msg: '',
        suc: true,
        sigined: true
      },
      scoreshow: false,
      inited: false // 1
    }
  },
  mixins: [loadMore],
  components: {
    'v-tab': vTab,
    modalDialog
  },
  computed: {
    ...mapState([
      'I9RIA', 'location'
    ])
  },
  mounted () {
    this.initData()
    if (this.location.city) {
      // this.initData()
      this.showFiller(localStorage.gameindextype ? localStorage.gameindextype : 'score') // 定位筛选
    };
    document.body.addEventListener('touchmove', (e) => {
      if (this.step > 0 && this.step < 5) e.preventDefault()
    }, !1)
  },
  activated () { // 获取文章详情页传的参数，改变积分记录
    this.getUserCreditPoint()
    if (this.$route.query.appid) {
      this.gameList.forEach(item => {
        if (item.appid === this.$route.query.appid) {
          item.receivedscore = +this.$route.query.score + +item.receivedscore + ''
        }
      })
      window.history.replaceState({}, '', '#/index')
    }
  },
  methods: {
    async initData () {
      if (this.inited) return
      this.inited = true
      if (cookie('shareState') === 'shared') {
        this.showShareDct = true
      }
      this.getBannerInfo(1)
      // this.showFiller(localStorage.gameindextype ? localStorage.gameindextype : 'score') // 定位筛选
      this.infoState()
      this.getLatestList()
      // let over = await subsribeCntToday()
      // this.complete = over.data.complete
      // let tmpData = await getUserCredit()
      // if (tmpData.code !== 0) return
      // this.scoreInfo = tmpData.data.credit_point
      // 引导
      this.guidefn()
    },
    async getUserCreditPoint () { // 分离获取积分的函数
      let over = await subsribeCntToday()
      this.complete = over.data.complete
      let tmpData = await getUserCredit()
      if (tmpData.code !== 0) return
      this.scoreInfo = tmpData.data.credit_point
    },
    guidefn () { // 显示引导判断
      if (window.localStorage.guideStepx) {
        this.step = parseInt(window.localStorage.guideStepx)
      } else {
        window.localStorage.isguided = 1
        this.step = 1
      }
    },
    async showFiller (parm) { // 过滤游戏类型
      if (this.inGetData) {
        return
      }
      localStorage.gameindextype = parm
      this.inGetData = true
      this.offset = 1
      let tmpData = null
      if (parm === 'score') {
        this.gameType = 2
        tmpData = await getGamePromotion(this.offset)
        // 临时合并
        this.sortType = 1
        let _tmpData = await getGame(this.offset, this.location.adcode, this.sortType)
        tmpData.data.list = [...tmpData.data.list, ..._tmpData.data.list]
      } else if (parm === 'redbag') {
        this.gameType = 3
        this.getRedPackList()
        return
      } else {
        this.gameType = 1
        tmpData = await getGame(this.offset, this.location.adcode, this.sortType)
      }
      this.getGameMakeData(tmpData)
    },
    async showFiller2 (parm) { // 福利类型排序
      if (this.inGetData) {
        return
      }
      this.inGetData = true
      this.offset = 1
      if (parm === 'hot') {
        this.sortType = 2
      } else {
        this.sortType = 1
      }
      let tmpData = await getGame(this.offset, this.location.adcode, this.sortType)
      this.getGameMakeData(tmpData)
    },
    async getBannerInfo (type) {
      let res = await getBanner(type)
      if (res.code !== 0) return
      if (type === 1) {
        this.swiperSlides = res.data.list
      }
    },
    async tryBannerRecord (id, url) {
      await bannerRecord(id)
      if (url.indexOf('http') !== -1) {
        window.location.href = url
      } else if (url.indexOf('http') === -1 && url.indexOf('#/') !== -1) {
        let routerUrl = url.substring(1)
        console.log(routerUrl)
        this.$router.push(routerUrl)
      }
    },
    async getLatestList () {
      let res = await latestRecord()
      this.sigin.sigined = !!res.data.signed
      if (res.code !== 0) {
        this.usermsgshow = false
        return false
      }
      this.latestlist = res.data.rows
    },
    async infoState () { // 是否设置用户兴趣资料
      let res = await userPersonality()
      let tmpArr = []
      res = res || []
      for (var i = 0; i < res.data.industries.length; i++) {
        if (res.data.industries[i].is_select) {
          tmpArr[tmpArr.length] = res.data.industries[i].cid
        }
      }
      if (!res.data.sex || !res.data.birthday || !tmpArr.length) {
        this.showInfoState = true
      }
    },
    async getRedPackList (more) {
      // 最后一页不再加载  防止重复请求
      if (!more) this.touchend = false
      if (this.touchend || this.preventRepeatReuqest) {
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true
      if (more) this.offset++
      let tmpData = await getRedPackList('', this.offset, 20, 0)
      this.inGetData = false
      this.showLoading = false
      if (tmpData.code !== 0) return
      let dataList = tmpData.data.list
      // 加载更多 or 重新加载
      if (more) {
        this.redPackList = [...this.redPackList, ...dataList]
      } else {
        this.redPackList = dataList
      }
      // 最后一页
      if (dataList.length < 10) {
        this.touchend = true
      }
      this.preventRepeatReuqest = false
    },
//  async tryChkSubscribe () { // 是否关注
//    let res = await ChkSubscribe()
//    if (res.code === 0) {
//      this.subscribe = true
//    } else {
//      this.subscribe = false
//    }
//  },
    getGameMakeData (tmpData) {
      this.inGetData = false
      this.showLoading = false
      this.touchend = true
      this.preventRepeatReuqest = false
      if (tmpData.code !== 0) return
      if (tmpData.data.list.length < this.pageSize) {
        this.touchend = true
      } else {
        this.touchend = false
      }
      this.gameList = tmpData.data.list
    },
    showSubscribe () {
      this.$refs.dialog.confirm('<h3 class="qrcode"></h3>', {
        type: 'alert',
        isQRcode: true
      })
    },
    async gameRecord (elem) { // elem.is_played = 1 已浏览
      if (elem.is_forge === '2') {
        this.$router.push('/article?wzid=' + this.I9RIA.unionid + '&appid=' + elem.appid + '&score=' + elem.personscore + '&icon=' + encodeURIComponent(elem.icon))
        await gameRecord(elem.appid, 22)
        elem.is_played = 1
      } else if (elem.is_forge === '3') {
        let token = atob(elem.wxlinkurl).match(/[a-zA-Z0-9]{11}/)[0]
        this.$router.push('/video?wzid=' + this.I9RIA.unionid + '&appid=' + elem.appid + '&score=' + elem.personscore + '&token=' + token + '&icon=' + encodeURIComponent(elem.icon))
        await gameRecord(elem.appid, 23)
        elem.is_played = 1
      } else if (elem.is_forge === '4') {
        this.$router.push('/html5?wzid=' + this.I9RIA.unionid + '&appid=' + elem.appid + '&score=' + elem.personscore + '&icon=' + encodeURIComponent(elem.icon))
        await gameRecord(elem.appid, 24)
        elem.is_played = 1
      } else if (elem.is_promotion === 1) {
        await gameRecord(elem.appid, elem.is_forge === '1' ? 4 : 1)
        let query = 'wzid=' + this.I9RIA.unionid + '&is_forge=' + elem.is_forge + '&appid=' + elem.appid + '&url=' + elem.url + '&wxlinkurl=' + elem.wxlinkurl + '&title=' + encodeURIComponent(elem.title) + '&icon=' + elem.icon + '&personscore=' + elem.personscore
        console.log('query:', query)
        this.$router.push('/gameinfo?' + query)
        elem.is_played = 1
      } else if (this.gameType === 3) {
        this.$router.push('/redpack?tid=' + elem.tid)
      } else {
        await gameRecord(elem.appid, 2)
        window.location.href = elem.url + '?platform=wz'
        elem.is_played = 1
      }
    },
    async loaderMore () {
      // 防止重复请求
      if (this.touchend || this.preventRepeatReuqest) {
        return
      }
      if (this.gameType === 3) {
        this.getRedPackList(true)
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true

      // 数据的定位+1
      this.offset++
      let res = null
      if (this.gameType === 2) { // 积分
        // res = await getGamePromotion(this.offset)
        // 临时
        res = await getGame(this.offset, this.location.adcode, this.sortType)
      } else { // 福利
        res = await getGame(this.offset, this.location.adcode, this.sortType)
      }
      this.showLoading = false
      if (res.code !== 0) {
        this.touchend = true
        this.preventRepeatReuqest = false
        return
      }
      this.gameList = [...this.gameList, ...res.data.list]
      // 当获取数据小于20，说明没有更多数据，不需要再次请求数据
      if (res.data.list.length < this.pageSize) {
        this.touchend = true
        this.preventRepeatReuqest = false
        return
      }
      this.preventRepeatReuqest = false
    },
    closelayer () {
      this.step = 5
      window.localStorage.guideStepx = 5
    },
    nextguide () {
      this.step ++
      if (this.step === 2) {
        this.showFiller('welfare')
      }
      if (this.step === 5) {
        window.localStorage.guideStepx = 5
        this.$router.push('/commision')
      }
    },
    recode (type, other) {
      clickRecord(type, other)
    },
    async siginEv () {
      if (!this.clickSignAble) return // 防止重复点击签到
      this.clickSignAble = false
      let res = await signed()
      this.sigin.msg = res.msg
      this.sigin.suc = res.code === 0
      this.siginShow = true
      if (!this.sigin.suc) return
      this.sigin.series = res.data.series
      this.sigin.point = res.data.point + res.data.bonus
      this.scoreInfo = this.scoreInfo + res.data.point
      this.sigin.quota = res.data.quota
      this.sigin.sigined = true
      this.scoreshow = true
      this.clickSignAble = true
    },
    closeSigin () {
      this.siginShow = false
      this.scoreshow = false
    }
  },
  watch: {
    location (val) { // 地址改变 请求对应城市的数据
      console.log('watchlocatonchange', val)
      if (val.city) {
        this.showFiller(localStorage.gameindextype ? localStorage.gameindextype : 'score')
        var city = localStorage.city
        if (!city || city !== val.city) {
          localStorage.city = val.city
          areaRecord(val.city)
        }
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.path !== '/redpack') {
      localStorage.gameindextype = ''
    }
    next()
  }
}
</script>
<style scoped>
.msg-close{position: absolute; top: 0; right: 0; width: 0.4rem; line-height: 0.3rem; font-size: 0.2rem; color: #fff; text-align: center;z-index: 99;}
/*.userinfo .msg{background: #ffba00; color: #fff; font-size: 0.1rem; line-height: 0.2rem; padding-left: 0.15rem;}*/
.userinfo{background:#fff;}
.userinfo .usermsg-box{position: relative;background:#ffa200;color:#fff;}
.userinfo .laba{background:url(../../assets/imgs/icon_horn.png) no-repeat;background-size: 100%;width:0.2rem;height:0.2rem;display: inline-block; margin-right: 0.09rem;position:relative;top:0.07rem;}
.userinfo .msg-swiper{height:0.3rem;text-align: center;position:relative;}
.userinfo .user-msg{width:100%;font-size: 0.12rem;color:#fff;display: inline-block;text-align: left; text-indent: 2em;padding-right: 0.4rem;}
.userinfo .avator{width: 0.67rem; padding-left: 0.15rem;height:1rem;padding-top: 0.24rem;position: relative;}
.userinfo .avator-box{width: 0.52rem; height: 0.52rem; border-radius: 12px; overflow: hidden; display: block; border: 2px solid #ffa200;}
.userinfo .avator-box img{width:100%;}
.userinfo .infobox{width: 0.935rem; padding-left: 0.09rem; font-size: 0.14rem; padding-top: 0.27rem;}
.userinfo .account{padding:0rem;text-align: center;}
.userinfo .location-hd{color:#999;}
.userinfo .new{position: absolute;width: 0.08rem;height:0.08rem;background:#ff1a2c;border-radius: 50%;top: 0.22rem; right: 0rem;}
.userinfo .con{padding: 0.13rem 0 0.08rem;color: #ffa200; font-size: 0.2rem; text-align: center;}
.userinfo .con span{vertical-align: middle;padding-left: 0.08rem;}
.userinfo .con i{width:0.25rem;height:0.25rem;background:url(../../assets/imgs/credits.png) no-repeat;background-size: 100%;display:inline-block;vertical-align: middle;}
.userinfo .btn-box{display: inline-block;}
.userinfo .btn-box .btn{display: inline-block;width: 0.75rem; line-height: 0.25rem;font-size: 0.11rem; color: #fff;text-align: center; border-radius: 22px; margin: 0 0.11rem;}
.userinfo .bd{border-top:1px solid #efeff4;border-bottom:1px solid #efeff4;}
.userinfo .s-info{font-size:0.12rem;color:#ffa200;margin-left: 0.1rem;}

.page-swiper{width:100%;height: 0.43rem;}
.page-swiper .swiper-slide,
.page-swiper .swiper-slide span{width:100%; height:100%; display:block; background-size:cover;}
.btn-group{display:inline-block;}
.nav-tab{background:#fff;line-height: 0.44rem;text-align:center;}
.nav-tab span{display:inline-block;line-height:.26rem; font-size:.14rem; color:#666; padding:0 .2rem;background:#fff;}
.nav-tab i{width:0.18rem;height:0.18rem;background:url(../../assets/imgs/tab/a-0.png) no-repeat;background-size: 100%;display: inline-block; margin-right: 0.05rem; position: relative; top: 0.035rem;}
.nav-tab i.i1{background-image:url(../../assets/imgs/tab/a-0.png)}
.nav-tab i.i2{background-image:url(../../assets/imgs/tab/b-0.png)}
.nav-tab i.i3{background-image:url(../../assets/imgs/tab/c-0.png)}
.nav-tab i.i3 i{background-image:url(../../assets/imgs/tab/new.png);width: 0.19rem; height: 0.16rem; position: absolute; top: -0.14rem; left: -0.1rem;}
.nav-tab span.active{color:#ffa200;}
.nav-tab span.active i.i1{background-image:url(../../assets/imgs/tab/a-1.png)}
.nav-tab span.active i.i2{background-image:url(../../assets/imgs/tab/b-1.png)}
.nav-tab span.active i.i3{background-image:url(../../assets/imgs/tab/c-1.png)}
.nav-tab.child{line-height: 0rem;}
.nav-tab.child .btn-group{border:none;width:90%;position: relative;border-top: 1px solid #f4f5f8;}
.nav-tab.child span{padding: 0 .06rem; color: #999; font-size: 0.11rem; height: 0.22rem; line-height: 0.2rem;margin: 0.05rem 0.46rem 0.03rem;border-bottom: 2px solid transparent; }
.nav-tab.child span.active{color:#333;border-color:#ffa200;}

.mod-items{background: transparent;margin-top: .05rem !important;}
.obj-list{margin-top:0.05rem;}
.mod-items .weui-cell{background:#fff;align-items: inherit;}
.def-icon{position: relative;margin-right:0.1rem; width: 0.75rem; height:0.75rem; border-radius:8px; overflow:hidden;}
.def-icon span{width:100%; height:100%; display:block; background-position:50%; background-size:cover; background-repeat:no-repeat;}
.mod-items .surplus{background:url(../../assets/imgs/icon-bdr.png) no-repeat;background-size: 100%;text-align: center; font-size: 0.14rem; padding-top: 0.5rem; color: #fa7429;font-weight: bold;}
.mod-items .task{background:url(../../assets/imgs/icon-task.png) no-repeat;background-size: 100%;}
.mod-items .cell__bd-tit{line-height:18px; color:#333; padding:3px 0; font-size:0.16rem;max-width:2.2rem;}
.mod-items .bd-desc{font-size:0.11rem;color: #999;margin-top: 0.06rem;}
.mod-items .bd-desc span{color: #ff7e00;}
.mod-items .seller{font-size: 0.11rem; padding-top: 0.1rem;}
.mod-items .seller i{display:inline-block;width: 0.14rem; height: 0.14rem; position: relative; margin-right: 5px; top: 0.02rem;background:url(../../assets/imgs/commision/q1.png) no-repeat;background-size: 100%;}
.mod-items .seller i.lg1,.mod-items .seller i.lg2{background-image:url(../../assets/imgs/commision/q1.png)}
.mod-items .seller i.lg3,.mod-items .seller i.lg4{background-image:url(../../assets/imgs/commision/q3.png)}
.mod-items .seller i.lg5{background-image:url(../../assets/imgs/commision/q5.png)}
.mod-items .seller i.lg6{background-image:url(../../assets/imgs/commision/q6.png)}
.mod-items .seller i.lg7{background-image:url(../../assets/imgs/commision/q7.png)}
.mod-items .seller i.lg8{background-image:url(../../assets/imgs/commision/q8.png)}
.mod-items .weui-cell .weui-cell__ft{position:relative; width:0.4rem;}
.mod-items .weui-cell .weui-cell__ft .complete{width:.45rem; height:.45rem;background:url(../../assets/imgs/complete.png) no-repeat; background-size:100%;position: absolute;top:0.14rem; right:0rem;}
.mod-items .weui-cell .weui-cell__ft .share{width:.38rem; height:.38rem;background:url(../../assets/imgs/share.png) no-repeat; background-size:100%;position: absolute;top: 0.18rem; right: 0;}
.icon-m{width:.18rem; height:.18rem; background:url(../../assets/imgs/icon-m.png) no-repeat 50% 50%; background-size:100% auto;}
.mod-items .weui-cell .weui-cell__ft span{position: absolute; right: 0; top: 0.3rem;}
.t-new{background:url(../../assets/imgs/new.png) no-repeat;background-size: 100%;display: inline-block; width: 0.47rem; height: 0.14rem;}
.t-pri{background:url(../../assets/imgs/prime.png) no-repeat;background-size: 100%;display: inline-block; width: 0.47rem; height: 0.14rem;}
.tips-info{position:fixed; right:.1rem; bottom:.6rem; z-index:10; width:0.46rem; height:.6rem; background:url(../../assets/imgs/tips-info.png) no-repeat 50% 50%; background-size:100% auto;}

.buling{background:url(../../assets/imgs/buli.png) no-repeat;background-size: 100%;display: inline-block; width: 1.69rem; height: 1.02rem;}
.buling.fail{background-image:url(../../assets/imgs/buli1.png)}
.sigin-ora,.sigin-desc{color:#666;font-size:0.13rem;line-height:0.21rem;}
.sigin-ora{color:#fe8f00;margin-top:0.1rem;}
.sigin-desc span{color:#ffbc14;}
.sigin-tip{height: 0; display: block; color: #ff602a; font-size: 0.3rem; font-weight: bold; opacity: 1; position: relative;top:-0.8rem;opacity:0;transition: all 0.3s 1s ease-in-out;}
.fold-enter-active{ opacity:0;top:0;transition: all 0.5s ease-in-out;}
.fold-enter-to{ opacity:1;top:-0.8rem; }
.fold-leave-active{ opacity:0; }

/*.page-msg{position: absolute; top: 0; width: 100%; line-height: 0.3rem; background: rgba(255,255,255,0.5); z-index: 9; color: #666; font-size: 0.1rem; text-align: center;}
.page-msg .m-about{background: #fa7429; color: #fff; padding: 0.01rem 0.1rem; border-radius: 22px; margin: 0 0.14rem;}*/
.font1{top: .7rem; left: 1rem;}
.font2{top: 0.5rem; right: 0.1rem;}
.font3{top: 1.6rem; left: 0.1rem;}
.font4{bottom: 1.4rem; left: 0.1rem;}
.guide-tab{background:url(../../assets/imgs/step1.jpg) no-repeat; background-size:100%;width: 0.75rem; height: 3rem; top: 1.21rem; left: 0.9rem; position: absolute;}
.nextguide{top: 4rem;}
.demo{background:url(../../assets/imgs/demo.png) no-repeat; background-size:100%;width: 100%; height: 0.9rem; top: 2.2rem; position: absolute;}

.weui-loadmore_line .weui-loadmore__tips{background: #efeff4;}
</style>
